<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    <head>
        <!-- Summernote CSS  -->
        <link rel="stylesheet" type="text/css" href="${rootPath}/js/plugins/nestable/nestable.css">
        <%@include file="common/head.jspf" %>
    </head>

    <body class="messages-page role-page sb-l-o sb-r-c" data-menu="" data-list="#li_role">

        <!-- 主体内容开始 -->
        <div id="main">

            <!--侧边导航栏-->
            <%@include file="common/sidebar.jspf" %>

            <!-- Start: Content-Wrapper -->
            <section id="content_wrapper">

                <!-- 顶部导航 -->
                <header id="topbar">
                    <div class="topbar-left">
                        <ol class="breadcrumb">
                            <li class="crumb-active">
                                <span>软擎科技</span>
                            </li>
                            <li class="crumb-icon">
                                <a href="dashboard"><span class="glyphicon glyphicon-home"></span></a>
                            </li>
                            <!-- 当前页 -->
                            <li class="crumb-trail">角色管理</li>
                        </ol>
                    </div>
                    <div class="topbar-right">
                        <!-- 登录信息 -->
                        <%@include file="common/session.jspf" %>
                    </div>
                </header>
                <!-- 顶部导航结束 -->

                <!-- 页面内容开始 -->
                <section id="content" class="table-layout">


                    <div class="tray tray-center pn va-t bg-light">

                        <!--文章列表-->
                        <div id="roles">
                            <div class="pv10 pl15 bg-white pr10 br-b">
                                <div class="row table-layout">
                                    <div class="col-xs-12 pn">
                                        <div class="btn-group pull-left hidden">
                                            <button type="button" class="btn btn-default light"><i class="fa fa-refresh"></i></button>
                                        </div>
                                        <div class="pull-left lh40 fs15 mn"><span class="glyphicons glyphicons-keys mr10"></span>角色列表</div>
                                        <div class="pull-right prn">
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-default light" id="add_role"><i class="fa fa-plus mr5"></i>添加角色</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- message listings table -->
                            <table id="roleTable" class="table admin-form theme-warning table-text-center trayTable">
                                <thead>
                                    <tr class="">
                                        <th></th>
                                        <th>角色名称</th>
                                        <th>角色说明</th>
                                        <th>员工总数</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="roleContainer">
                                    <tr>
                                        <td colspan="5" class="text-center text-muted-light pv50 fs15" id="roleTd">
                                            <i class="mr10 fa fa-spin fa-spinner"></i>加载中 ...
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <aside class="tray tray-right pn va-t tray400" data-tray-height="match">
                        <div class="p20">
                            <h4 class="mt5 mb20"> 角色权限列表 <button class="btn btn-default pull-right" id="saveRolePermission" style="margin: -15px -10px 0 0;">保存权限</button></h4>
                            <ul class="list-unstyled list-spacing-10 mb10 pl5">
                                <li>
                                    <i class="fa fa-exclamation-circle text-alert fa-lg pr10"></i>
                                    点击角色行加载相应权限
                                </li>
                            </ul>
                        </div>
                        <div class="form-horizontal no-selection pl20" method="get" id="permissions">
                            <div class="fs16 text-muted mt25 text-center p-load-info"><span class="fa fa-spin fa-spinner mr10"></span>加载中 ..</div>
                            <div class="row">
                                <div class="col-md-6 leftCol"></div>
                                <div class="col-md-6 rightCol">
                                </div>
                            </div>
                        </div>
                    </aside>
                </section>
                <!-- 页面内容结束 -->
            </section>
        </div>
        <!-- 主体内容结束 -->

        <!-- Admin Form Popup -->
        <div id="addRolePanel" class="popup-basic admin-form mfp-with-anim mfp-hide">
            <div class="panel">
                <div class="panel-body p25">
                    <div class="section mb10">
                        <label for="roleName" class="field prepend-icon">
                            <input type="text" name="roleName" id="roleName" class="event-name gui-input br-light light" placeholder="角色名称">
                            <label for="roleName" class="field-icon"><i class="fa fa-user"></i></label>
                        </label>
                    </div>
                    <div class="section mb10">
                        <label class="field prepend-icon">
                            <textarea class="gui-textarea br-light h-80 bg-light" id="description" name="description" placeholder="角色说明"></textarea>
                            <label for="description" class="field-icon"><i class="fa fa-comments"></i></label>
                        </label>
                    </div>
                    <button class="btn btn-primary btn-block" id="saveRoleBtn"><i class="fa fa-check mr10"></i>保存角色</button>
                </div>
            </div>
            <!-- end: .panel -->
        </div>

        <div id="addEmployeePanel" class="popup-basic admin-form mfp-with-anim mfp-hide">
            <div class="panel">
                <div class="panel-heading text-center">
                    <span class="panel-title fs16">添加角色员工</span>
                </div>
                <div class="panel-body p25">
                    <div class="form-horizontal no-selection mb30" id="employeeDiv"></div>
                    <button class="btn btn-primary btn-block" id="saveMemberBtn"><i class="fa fa-check mr10"></i>保存</button>
                </div>
            </div>
            <!-- end: .panel -->
        </div>

        <script type="text/x-tmpl-mustache" id="roleEmployeeTemplate">
            <table class="table table-text-center">
                <thead class="hidden">
                    <tr>
                        <th>员工登录名</th>
                        <th>员工姓名</th>
                        <th>员工手机号</th>
                        <th>账号状态</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {{#members}}
                    <tr class="message-read">
                        <td><a href="employee/index/{{id}}" target="_blank">{{loginName}}</a></td>
                        <td>{{name}}</td>
                        <td>{{mobile}}</td>
                        <td>{{status}}</td>
                        <td>
                            <div class="btn-group mr10">
                                <button class="btn btn-default btn-xs light btn-sm text-muted delete-member-link" data-id="{{id}}" data-rid="{{rid}}"><i class="fa fa-trash"></i></button>
                            </div>
                        </td>
                    </tr>
                    {{/members}}
                </tbody>
            </table>
        </script>

        <script type="text/x-tmpl-mustache" id="permissionTemplate">
           {{#result}}
               <div class="checkbox-custom checkbox-alert mb5">
                   <input type="checkbox" value="{{name}}" id="{{key}}" class="permission_checkbox">
                   <label for="{{key}}">{{key}}{{{mode}}}</label>
               </div>
           {{/result}}
        </script>
        
        <script type="text/x-tmpl-mustache" id="memberTemplate">
           {{#result}}
               <div class="checkbox-custom checkbox-primary mb15 member_checkbox_div" id="m-{{id}}">
                   <input type="checkbox" value="{{id}}" id="{{id}}" class="member_checkbox">
                   <label for="{{id}}">{{loginName}} - {{name}}</label>
               </div>
           {{/result}}
        </script>

        <script type="text/x-tmpl-mustache" id="roleBtns">
            <div class="btn-group">
                <button class="btn btn-default light btn-xs edit-role-link" role="buton" title="修改" data-id={{id}}><i class="fa fa-pencil text-muted"></i></button>
                <button class="btn btn-default light btn-xs add-member-link" role="buton" title="添加员工" data-id={{id}}><i class="fa fa-plus text-muted"></i></button>
                <button class="btn btn-default light btn-xs delete-role-link" role="button" title="删除" data-id={{id}}><i class="fa fa-trash text-muted"></i></button>
            </div>
        </script>


        <!-- 公共函数 -->
        <%@include file="common/scripts.jspf" %>
        <!-- Summernote JS -->
        <!-- Plugin JS -->
        <script type="text/javascript" src="${rootPath}/js/plugins/nestable/jquery.nestable.js"></script>
        <script type="text/javascript" src="${rootPath}/js/pages/role.js"></script>
    </body>
</html>
